<template>
  <div v-loading="loading" element-loading-text="加载中。。。" class="userBaseData">
    <!-- <el-card> -->
      <el-row >
        <el-col :span="6" class="branchStyle">
          <el-card style='height:800px;overflow:auto' shadow="never">
            <div class="titleStyle" >机构树</div>
            <el-divider></el-divider>
            <div class="block">
              <!-- 机构 -->
              <select-tree :tree-data="treedata" :branch="BRANCHNAME" :my-show='true' @getBranchName="getBranch"></select-tree>
            </div>
            <el-divider></el-divider>
            <!-- 用户列表 -->
            <div class="titleStyle">人员列表</div>
            <el-divider></el-divider>
            <div v-if="userData.length>0" class="userClass">
              <el-checkbox :indeterminate="isIndeterminate"  v-model="checkAll"
                @change="handleCheckAllChange" >全选</el-checkbox>
              <el-checkbox-group v-model="checkedCities"  v-if="userData.length>0" @change="handleCheckedCitiesChange">
                <el-checkbox v-for="(item,index) in userData" @change="getUserInfo(item)" 
                  :label="item.AGENTID" :key="index" >{{item.AGENTNAME}}</el-checkbox>
              </el-checkbox-group>
              <div style="margin: 0 0 20px 20px;" v-if="userData.length>0">
                <el-button type="primary" size="small" @click="queryModel()" :disabled="checkedCities.length==0">查看</el-button>
                <el-button size="small" @click="checkedCities=[];checkAll=false;AUX_BRNO='';AUX_BRNOS=[];">取消选择</el-button>
              </div>
            </div>
            <div v-else style="text-align:center;margin-top:20px;">暂无数据</div>
          </el-card>
        </el-col>
        <el-col :span="18">
          <el-card style="margin-left:1px;height:800px;overflow:auto">
            <div>坐席排班参数管理</div>
            <el-divider></el-divider>
            <div style="margin-bottom: 10px;">
              <el-form label-width="100px" label-position="top" size="small">
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="主机构">
                      <el-input v-model.trim="BRANCHNAME" disabled></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <!-- <el-col :span="24">
                    <el-form-item label="坐席">
                      <span v-for="(item,index) in selRoleInfo" :key="index">{{item.AGENTNAME}}&nbsp;&nbsp;</span>
                    </el-form-item>
                  </el-col> -->
                  <!-- <el-col :span="24" style="margin-bottom:20px;">
                    <el-button type="primary" size="small" :disabled="checkedCities.length != 1">查询坐席附属机构</el-button>
                    <el-button type="primary" size="small" :disabled="checkedCities.length==0" @click="queryModel">查询参数</el-button>
                  </el-col>
                  <el-col :span="24">
                    <el-form-item label="附属机构号">
                      <el-checkbox-group 
                        v-model="AUX_BRNO"
                        :min="0"
                        :max="1"
                        v-if="AUX_BRNOS.length!=0">
                        <el-checkbox v-for="(item,index) in AUX_BRNOS" 
                          :key="index" 
                          :label="item.label" border
                          style="float: left;">{{item.value}}</el-checkbox>
                      </el-checkbox-group>
                      <span v-else>暂无数据</span>
                    </el-form-item>
                  </el-col> -->
                </el-row>
              </el-form>
            </div>
           
            <el-form :model="ruleForm" ref="ruleForm" label-width="200px" :rules="rules" label-position="top">

              <el-tabs v-model="activeNames">
                <el-tab-pane label="基本工作规则" name="1">
                  <template slot="title">
                    基本工作规则
                  </template>
                  <el-row :gutter=10>
                    <el-col :span="6">
                      <el-form-item label="每周工作最小时数" prop="WEEKWORKMINHOURS">
                        <el-input v-model.trim="ruleForm.WEEKWORKMINHOURS" size="small" maxlength="4" placeholder="请输入每周工作最小时数"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="6">
                      <el-form-item label="每周工作最大时数" prop="WEEKWORKMAXHOURS">
                        <el-input v-model.trim="ruleForm.WEEKWORKMAXHOURS" size="small" maxlength="4" placeholder="请输入每周工作最大时数"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="6">
                      <el-form-item label="最多连续工作天数" prop="MAXCONTINUEDAYS">
                        <el-input v-model.trim="ruleForm.MAXCONTINUEDAYS" size="small" maxlength="4" placeholder="请输入最多连续工作天数"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="6">
                      <el-form-item label="每天加班最大时数" prop="DAYOTMAXHOURS">
                        <el-input v-model.trim="ruleForm.DAYOTMAXHOURS" size="small" maxlength="4" placeholder="请输入每天加班最大时数"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="6">
                      <el-form-item label="每周加班最大时数" prop="WEEKOTMAXHOURS">
                        <el-input v-model.trim="ruleForm.WEEKOTMAXHOURS" size="small" maxlength="4" placeholder="请输入每周加班最大时数"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="6">
                      <el-form-item label="每月加班最大时数" prop="MONTHOTMAXHOURS">
                        <el-input v-model.trim="ruleForm.MONTHOTMAXHOURS" size="small" maxlength="4" placeholder="请输入每月加班最大时数"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="6">
                      <el-form-item label="每周累积休假天数" prop="WEEKACCUHOLIDAY">
                        <el-input v-model.trim="ruleForm.WEEKACCUHOLIDAY" size="small" maxlength="4" placeholder="请输入每周累积休假天数"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="6">
                      <el-form-item label="每月累积休假天数" prop="MONTHACCUHOLIDAY">
                        <el-input v-model.trim="ruleForm.MONTHACCUHOLIDAY" size="small" maxlength="4" placeholder="请输入每月累积休假天数"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="6">
                      <el-form-item label="每年可休假期天数" prop="YEARENABLEHOLIDAYDAYS">
                        <el-input v-model.trim="ruleForm.YEARENABLEHOLIDAYDAYS" size="small" maxlength="4" placeholder="请输入每年可休假期天数"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span='6'>
                      <el-form-item label="相邻班次最短时间间隔" prop="CLASSMINSPAN">
                        <el-time-picker size="small"
                          v-model="ruleForm.CLASSMINSPAN"
                          format="HH:mm"
                          value-format="HH:mm"
                          @focus="ruleForm.CLASSMINSPAN===null || ruleForm.CLASSMINSPAN===''?ruleForm.CLASSMINSPAN='00:00':ruleForm.CLASSMINSPAN"
                          style="width: 100%">
                        </el-time-picker>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <div style="text-align: left;margin-top: 10px;">
                    <el-button type="danger" size="small" @click="resetForm('ruleForm','1')">重置</el-button>
                    <el-button type="primary" size="small" @click="submitForm('ruleForm','1')">保存</el-button>
                  </div>
                </el-tab-pane>
                <el-tab-pane label="每月工时分配" name="2">
                  <el-table border style="width: 100%"
                  :data="tableData.MONTHWHLIST">
                  <el-table-column prop="MONTH" label="月份"></el-table-column>
                  <el-table-column prop="MINHOURS" label="每月最小时数">
                    <template slot-scope="scope">
                      <el-input type="text" size="small" v-model="scope.row.MINHOURS" maxlength="5"></el-input>
                    </template>
                  </el-table-column>
                  <el-table-column prop="MAXHOURS" label="每月最大时数">
                    <template slot-scope="scope">
                      <el-input type="text" size="small" v-model="scope.row.MAXHOURS" maxlength="5"></el-input>
                    </template>
                  </el-table-column>
                </el-table>
                <div style="text-align: left;margin-top: 10px;">
                  <el-button type="danger" size="small" @click="resetForm()">重置</el-button>
                  <el-button type="primary" size="small" @click="editUserBaseData('2')">保存</el-button>
                </div>
                </el-tab-pane>
                <el-tab-pane label="关联工作模式列表" name="3">
                  <template slot="title">
                    关联工作模式列表
                  </template>
                  <el-table
                    :data="tableData.WORKMODELIST"
                    border
                    style="width: 100%">
                    <el-table-column prop="WORKMODEID" label="工作模式编号" align="center"></el-table-column>
                    <el-table-column prop="WORKMODENAME" label="工作模式名称" align="center"></el-table-column>
                    <el-table-column prop="SRTDATE" label="开始日期-结束日期" align="center" width="340">
                      <template slot-scope="scope">
                        <el-date-picker
                          v-model="scope.row.SRTDATE"
                          type="daterange"
                          range-separator="-"
                          unlink-panels
                          size="small"
                          @change='change'
                          :clearable='false'
                          value-format="yyyyMMdd"
                          start-placeholder="开始日期"
                          end-placeholder="结束日期">
                        </el-date-picker>
                      </template>
                    </el-table-column>
                    <el-table-column label="操作" width="50">
                      <template slot-scope="scope">
                        <el-tooltip class="item" effect="dark" content="删除" placement="top">
                          <el-button type="text" @click="delClick('3',scope.row)">
                            <i class="el-icon-delete"></i>
                          </el-button>
                        </el-tooltip>
                      </template>
                    </el-table-column>
                  </el-table>
                  <div style="text-align: right;margin-top: 10px;">
                    <el-button type="primary" size="small" @click="openPop1(tableData.WORKMODELIST,'3','附属机构工作模式列表')" :disabled="checkedCities.length != 1">关联附属机构工作模式</el-button>
                    <el-button type="primary" size="small" @click="editUserBaseData('3')">保存</el-button>
                    <el-button type="primary" size="small" @click="openPop(tableData.WORKMODELIST,'3','增加工作模式列表')">新增</el-button>
                    <el-button type="danger" size="small" @click="resetForm()">重置</el-button>
                  </div>
                </el-tab-pane>
                <el-tab-pane label="关联分配规则列表" name="4">
                  <template slot="title">
                    关联分配规则列表
                  </template>
                  <el-table
                    :data="tableData.ASSIGNRULELIST"
                    border
                    style="width: 100%">
                    <el-table-column prop="ASSIGNRULEID" label="分配规则编号" align="center"></el-table-column>
                    <el-table-column prop="ASSIGNRULENAME" label="分配规则名称" align="center"></el-table-column>
                    <el-table-column prop="SRTDATE" label="开始日期-结束日期" align="center" width="340">
                      <template slot-scope="scope">
                        <el-date-picker
                          v-model="scope.row.SRTDATE"
                          type="daterange"
                          range-separator="-"
                          unlink-panels
                          size="small"
                          :clearable='false'
                          value-format="yyyyMMdd"
                          start-placeholder="开始日期"
                          end-placeholder="结束日期">
                        </el-date-picker>
                      </template>
                    </el-table-column>
                    <el-table-column label="操作" width="50">
                      <template slot-scope="scope">
                        <el-tooltip class="item" effect="dark" content="删除" placement="top">
                          <el-button type="text" @click="delClick('4',scope.row)">
                            <i class="el-icon-delete"></i>
                          </el-button>
                        </el-tooltip>
                      </template>
                    </el-table-column>
                  </el-table>
                  <div style="text-align: right;margin-top: 10px;">
                    <el-button type="primary" size="small" @click="openPop1(tableData.ASSIGNRULELIST,'4','附属机构分配规则列表')" :disabled="checkedCities.length != 1">关联附属机构分配规则</el-button>
                    <el-button type="primary" size="small" @click="submitForm('ruleForm','4')">保存</el-button>
                    <el-button type="primary" size="small" @click="openPop(tableData.ASSIGNRULELIST,'4','增加分配规则列表')">新增</el-button>
                    <el-button type="danger" size="small" @click="resetForm()">重置</el-button>
                  </div>
                </el-tab-pane>
              </el-tabs>

              <!-- <el-collapse v-model="activeNames" @change="handleChange">
                <el-collapse-item name="1">
                  <template slot="title">
                    基本工作规则
                  </template>
                  <el-row :gutter=10>
                    <el-col :span="6">
                      <el-form-item label="每周工作最小时数" prop="WEEKWORKMINHOURS">
                        <el-input v-model.trim="ruleForm.WEEKWORKMINHOURS" size="small" maxlength="4" placeholder="请输入每周工作最小时数"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="6">
                      <el-form-item label="每周工作最大时数" prop="WEEKWORKMAXHOURS">
                        <el-input v-model.trim="ruleForm.WEEKWORKMAXHOURS" size="small" maxlength="4" placeholder="请输入每周工作最大时数"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="6">
                      <el-form-item label="最多连续工作天数" prop="MAXCONTINUEDAYS">
                        <el-input v-model.trim="ruleForm.MAXCONTINUEDAYS" size="small" maxlength="4" placeholder="请输入最多连续工作天数"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="6">
                      <el-form-item label="每天加班最大时数" prop="DAYOTMAXHOURS">
                        <el-input v-model.trim="ruleForm.DAYOTMAXHOURS" size="small" maxlength="4" placeholder="请输入每天加班最大时数"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="6">
                      <el-form-item label="每周加班最大时数" prop="WEEKOTMAXHOURS">
                        <el-input v-model.trim="ruleForm.WEEKOTMAXHOURS" size="small" maxlength="4" placeholder="请输入每周加班最大时数"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="6">
                      <el-form-item label="每月加班最大时数" prop="MONTHOTMAXHOURS">
                        <el-input v-model.trim="ruleForm.MONTHOTMAXHOURS" size="small" maxlength="4" placeholder="请输入每月加班最大时数"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="6">
                      <el-form-item label="每周累积休假天数" prop="WEEKACCUHOLIDAY">
                        <el-input v-model.trim="ruleForm.WEEKACCUHOLIDAY" size="small" maxlength="4" placeholder="请输入每周累积休假天数"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="6">
                      <el-form-item label="每月累积休假天数" prop="MONTHACCUHOLIDAY">
                        <el-input v-model.trim="ruleForm.MONTHACCUHOLIDAY" size="small" maxlength="4" placeholder="请输入每月累积休假天数"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="6">
                      <el-form-item label="每年可休假期天数" prop="YEARENABLEHOLIDAYDAYS">
                        <el-input v-model.trim="ruleForm.YEARENABLEHOLIDAYDAYS" size="small" maxlength="4" placeholder="请输入每年可休假期天数"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span='6'>
                      <el-form-item label="相邻班次最短时间间隔" prop="CLASSMINSPAN">
                        <el-time-picker size="small"
                          v-model="ruleForm.CLASSMINSPAN"
                          format="HH:mm"
                          value-format="HH:mm"
                          @focus="ruleForm.CLASSMINSPAN===null || ruleForm.CLASSMINSPAN===''?ruleForm.CLASSMINSPAN='00:00':ruleForm.CLASSMINSPAN"
                          style="width: 100%">
                        </el-time-picker>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <div style="text-align: right;margin-top: 10px;">
                    <el-button type="primary" size="small" @click="submitForm('ruleForm','1')">保存</el-button>
                    <el-button type="danger" size="small" @click="resetForm('ruleForm','1')">重置</el-button>
                  </div>
                </el-collapse-item>
                <el-collapse-item title="每月工时分配" name="2">
                  <el-table border style="width: 100%"
                    :data="tableData.MONTHWHLIST">
                    <el-table-column prop="MONTH" label="月份"></el-table-column>
                    <el-table-column prop="MINHOURS" label="每月最小时数">
                      <template slot-scope="scope">
                        <el-input type="text" size="small" v-model="scope.row.MINHOURS" maxlength="5"></el-input>
                      </template>
                    </el-table-column>
                    <el-table-column prop="MAXHOURS" label="每月最大时数">
                      <template slot-scope="scope">
                        <el-input type="text" size="small" v-model="scope.row.MAXHOURS" maxlength="5"></el-input>
                      </template>
                    </el-table-column>
                  </el-table>
                  <div style="text-align: right;margin-top: 10px;">
                    <el-button type="primary" size="small" @click="editUserBaseData('2')">保存</el-button>
                    <el-button type="danger" size="small" @click="resetForm()">重置</el-button>
                  </div>
                </el-collapse-item>
                <el-collapse-item name="3">
                  <template slot="title">
                    关联工作模式列表
                  </template>
                  <el-table
                    :data="tableData.WORKMODELIST"
                    border
                    style="width: 100%">
                    <el-table-column prop="WORKMODEID" label="工作模式编号" align="center"></el-table-column>
                    <el-table-column prop="WORKMODENAME" label="工作模式名称" align="center"></el-table-column>
                    <el-table-column prop="SRTDATE" label="开始日期-结束日期" align="center" width="340">
                      <template slot-scope="scope">
                        <el-date-picker
                          v-model="scope.row.SRTDATE"
                          type="daterange"
                          range-separator="-"
                          unlink-panels
                          size="small"
                          @change='change'
                          :clearable='false'
                          value-format="yyyyMMdd"
                          start-placeholder="开始日期"
                          end-placeholder="结束日期">
                        </el-date-picker>
                      </template>
                    </el-table-column>
                    <el-table-column label="操作" width="50">
                      <template slot-scope="scope">
                        <el-tooltip class="item" effect="dark" content="删除" placement="top">
                          <el-button type="text" @click="delClick('3',scope.row)">
                            <i class="el-icon-delete"></i>
                          </el-button>
                        </el-tooltip>
                      </template>
                    </el-table-column>
                  </el-table>
                  <div style="text-align: right;margin-top: 10px;">
                    <el-button type="primary" size="small" @click="openPop1(tableData.WORKMODELIST,'3','附属机构工作模式列表')" :disabled="checkedCities.length != 1">关联附属机构工作模式</el-button>
                    <el-button type="primary" size="small" @click="editUserBaseData('3')">保存</el-button>
                    <el-button type="primary" size="small" @click="openPop(tableData.WORKMODELIST,'3','增加工作模式列表')">新增</el-button>
                    <el-button type="danger" size="small" @click="resetForm()">重置</el-button>
                  </div>
                </el-collapse-item>
                <el-collapse-item name="4">
                  <template slot="title">
                    关联分配规则列表
                  </template>
                  <el-table
                    :data="tableData.ASSIGNRULELIST"
                    border
                    style="width: 100%">
                    <el-table-column prop="ASSIGNRULEID" label="分配规则编号" align="center"></el-table-column>
                    <el-table-column prop="ASSIGNRULENAME" label="分配规则名称" align="center"></el-table-column>
                    <el-table-column prop="SRTDATE" label="开始日期-结束日期" align="center" width="340">
                      <template slot-scope="scope">
                        <el-date-picker
                          v-model="scope.row.SRTDATE"
                          type="daterange"
                          range-separator="-"
                          unlink-panels
                          size="small"
                          :clearable='false'
                          value-format="yyyyMMdd"
                          start-placeholder="开始日期"
                          end-placeholder="结束日期">
                        </el-date-picker>
                      </template>
                    </el-table-column>
                    <el-table-column label="操作" width="50">
                      <template slot-scope="scope">
                        <el-tooltip class="item" effect="dark" content="删除" placement="top">
                          <el-button type="text" @click="delClick('4',scope.row)">
                            <i class="el-icon-delete"></i>
                          </el-button>
                        </el-tooltip>
                      </template>
                    </el-table-column>
                  </el-table>
                  <div style="text-align: right;margin-top: 10px;">
                    <el-button type="primary" size="small" @click="openPop1(tableData.ASSIGNRULELIST,'4','附属机构分配规则列表')" :disabled="checkedCities.length != 1">关联附属机构分配规则</el-button>
                    <el-button type="primary" size="small" @click="submitForm('ruleForm','4')">保存</el-button>
                    <el-button type="primary" size="small" @click="openPop(tableData.ASSIGNRULELIST,'4','增加分配规则列表')">新增</el-button>
                    <el-button type="danger" size="small" @click="resetForm()">重置</el-button>
                  </div>
                </el-collapse-item>
              </el-collapse> -->
            </el-form>
          </el-card>
        </el-col>
      </el-row>
      <!-- 弹窗 -->
      <component :is="dialogList.tableDialog" :option="editOptions"></component>
      <component :is="dialogList.auxBrnTableDialog" :option="auxBrnOptions" ref="myChild2"></component>
    <!-- </el-card> -->
  </div>
</template>
<script>
import tableDialog from './dialog/tableDialog';
import auxBrnTableDialog from './dialog/auxBrnTableDialog';
import getGlobalParams from "@/common/utils/getGlobalParams";
import request from "@/common/utils/requestWFM";
import selectTree from "@/components/selectTree5/";
import queryUserBaseData from "@/message/wfm/scheduleDataManage/userBaseData/queryUserBaseData";
import editUserBaseData from "@/message/wfm/scheduleDataManage/userBaseData/editUserBaseData";

import Query from '@/message/wfm/baseData/branchManage/branchQuery';
import userQuery from '@/message/wfm/baseData/userManage/userQuery';



export default {
  components: {
    selectTree
  },
  data() {
    return {
      loading: '',
      activeNames: '1',
      // 弹窗
      dialogList: { tableDialog,auxBrnTableDialog },
      editOptions:{
        isShow:false,
        title: '',
        BRANCHNO: ''
      },
      auxBrnOptions:{
        isShow:false,
        title: '',
        BRANCHNO: ''
      },
      ruleForm: {
        WEEKWORKMINHOURS: '',  //每周工作最小时数
        WEEKWORKMAXHOURS: '',  //每周工作最大时数
        MAXCONTINUEDAYS: '', //最多连续工作天数
        DAYOTMAXHOURS: '',  //每天加班最大时数
        WEEKOTMAXHOURS: '',  //每周加班最大时数
        MONTHOTMAXHOURS: '',  //每月加班最大时数
        YEARENABLEHOLIDAYDAYS: '',  //每年可休假期天数
        WEEKACCUHOLIDAY: '',  //每周累积休假天数
        MONTHACCUHOLIDAY: '',  //每月累积休假天数
        CLASSMINSPAN: '',  //相邻班次最短时间间隔
      },
      rules: {
        WEEKWORKMINHOURS:[{required: true,message: '请输入每周工作最小时数',trigger: 'blur'}],
        WEEKWORKMAXHOURS:[{required: true,message: '请输入每周工作最大时数',trigger: 'blur'}],
        MAXCONTINUEDAYS:[{required: true,message: '请输入最多连续工作天数',trigger: 'blur'}],
        CLASSMINSPAN:[{required: true,message: '请输入相邻班次最短时间间隔',trigger: 'blur'}],
      },
      ruleFormBack: {},
      tableData: [],
      vacation: {
        name: '',
      },
      // 坐席列表
      AGENTDATA: {},
      // 机构信息
      resData: "",
      BRANCHNO: this.$store.getters.BranchNum,
      BRANCHNAME: this.$store.getters.BranchName,
      treedata: [],
      defaultProps: {
        children: 'children',
        label: 'BRANCHNAME'
      },
      selRole: this.$store.getters.UserNum, //当前选中得角色
      selRoleInfo: [], //角色信息
      checkedCities: [],  //选中用户
      userData: [],
      // 分页
      PageFlag:'',
      currentPage: 1,
      pageSize: getGlobalParams.get("PageSize"),
      tableTotal: 0,
      // 全选
      isIndeterminate: true,
      checkAll: false,
      allUser:[],  //所有用户
      // 附属机构
      AUX_BRNOS: [],
      AUX_BRNO: [],
    }
  },
  watch:{
    userData(val){
      this.allUser = [];
      this.userData.forEach(item=>{
        this.allUser.push(item.AGENTID);
      })
    },
    checkedCities(val){
      this.selRoleInfo = [];
      this.AUX_BRNO=[];
      this.AUX_BRNOS=[];
      this.checkedCities.forEach(info=>{
         this.userData.forEach((item,index)=>{
          if(item.AGENTID == info){
            this.selRoleInfo.push(item);
          }
        })
      })
    }
  },
  mounted() {
    this.queryModel('first');
    // this.queryBranch();
    this.queryUser();
  },
  methods: {
    // handleElTab(tab, event) {
    //   console.log(tab, event);
    // },

    change(val){console.log(this.tableData.WORKMODELIST);},
    handleCheckAllChange(val) {
      this.checkedCities = val ? this.allUser : [];
      this.isIndeterminate = false;
    },
    handleCheckedCitiesChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.allUser.length;
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.allUser.length;
    },
    queryUser() { //查询用户表格
      this.loading = true;
      let resBody = new userQuery();
      resBody.data.AGENTID = '';
      resBody.data.AGENTNAME = '';
      resBody.data.BRANCHNO = this.BRANCHNO;
      resBody.data.CurrPage = this.currentPage; 
      resBody.data.PageRowNum = '100' || this.pageSize; 
      request(resBody)
        .then(response => {
          if (response.SYS_HEAD.ReturnCode === "000000") {
            this.loading = false;
            this.userData = response.BODY.AGENTDATA;
            // this.tableTotal = response.BODY.TotalRowNum;
            this.userData.forEach(item=>{
              if(item.AGENTID == this.checkedCities[0]){
                this.selRoleInfo.push(item);
              }
            })
          }else{
            this.loading = false;
            this.$message({
              type: "error",
              message: "请求失败，错误码:" + response.SYS_HEAD.ReturnCode + "，错误信息：" + response.SYS_HEAD.ReturnMessage
            })
          }
        })
        .catch(error => {
          this.loading = false;
        });
    },
    // 分页操作
    handleSizeChange(val) {
      this.pageSize = val;
      this.queryUser();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.queryUser();
    },
    // 点击用户操作
    getUserInfo(item) {
      console.log(this.checkedCities.join(","));
      // this.selRoleInfo.push(item);
    },
    handleChange(val) {
      console.log(val);
    },
    submitForm(formName,MODIFYMODE) {
      if(formName){
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.editUserBaseData(MODIFYMODE);
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      }
    },
    delClick(op,row,d) {
      if(d != 'ddd'){
        if(op=='3'){
          this.tableData.WORKMODELIST = this.removeAaary(this.tableData.WORKMODELIST,row);
        }else{
          this.tableData.ASSIGNRULELIST = this.removeAaary(this.tableData.ASSIGNRULELIST,row);
        }
      }else{
        var data = this.removeAaary(this.$refs.myChild2.tableData,row);
        if(op=='3'){
          this.tableData.WORKMODELIST = data;
        }else{
          this.tableData.ASSIGNRULELIST = data;
        }
      }
      this.editUserBaseData(op);
    },
    /*删除数组中的某一个对象
    _arr:数组
    _obj:需删除的对象
    */
    removeAaary(_arr, _obj) {
      var length = _arr.length;
      for (var i = 0; i < length; i++) {
        if (_arr[i] == _obj) {
          if (i == 0) {
            _arr.shift(); //删除并返回数组的第一个元素
            return _arr;
          }
          else if (i == length - 1) {
            _arr.pop();  //删除并返回数组的最后一个元素
            return _arr;
          }
          else {
            _arr.splice(i, 1); //删除下标为i的元素
            return _arr;
          }
        }
      }
    },
    openPop(data,op,title) {
      this.editOptions.isShow = true;
      this.editOptions.title = title;
      this.editOptions.row = data;
      this.editOptions.op = op;
      this.editOptions.BRANCHNO = this.BRANCHNO 
    },
    // 关联附属机构得工作模式或分配机构
    openPop1(data,op,title) {
      this.auxBrnOptions.isShow = true;
      this.auxBrnOptions.title = title;
      this.auxBrnOptions.row = data;
      this.auxBrnOptions.op = op;
      this.auxBrnOptions.BRANCHNO = this.BRANCHNO;
    },
    // 坐席排班参数数据维护
    editUserBaseData(MODIFYMODE,data) {
      this.loading = true;
      let resBody = new editUserBaseData();
      if(this.auxBrnOptions.isShow){
        resBody.data.BRANCHNO = this.$refs.myChild2.AUX_BRNO[0];
      }else{
        resBody.data.BRANCHNO = this.BRANCHNO;
      }
      resBody.data.AGENTIDLISTSTR = this.checkedCities.join(",");
      resBody.data.MODIFYMODE = MODIFYMODE;
      if(MODIFYMODE == '1'){
        resBody.data.BASERULE = {
          WEEKWORKMINHOURS: this.ruleForm.WEEKWORKMINHOURS,  //每周工作最小时数
          WEEKWORKMAXHOURS: this.ruleForm.WEEKWORKMAXHOURS,  //每周工作最大时数
          MAXCONTINUEDAYS: this.ruleForm.MAXCONTINUEDAYS, //最多连续工作天数
          DAYOTMAXHOURS: this.ruleForm.DAYOTMAXHOURS,  //每天加班最大时数
          WEEKOTMAXHOURS: this.ruleForm.WEEKOTMAXHOURS,  //每周加班最大时数
          MONTHOTMAXHOURS: this.ruleForm.MONTHOTMAXHOURS,  //每月加班最大时数
          YEARENABLEHOLIDAYDAYS: this.ruleForm.YEARENABLEHOLIDAYDAYS,  //每年可休假期天数
          WEEKACCUHOLIDAY: this.ruleForm.WEEKACCUHOLIDAY,  //每周累积休假天数
          MONTHACCUHOLIDAY: this.ruleForm.MONTHACCUHOLIDAY,  //每月累积休假天数
          CLASSMINSPAN: this.ruleForm.CLASSMINSPAN,  //单人相邻班次最短时间间隔
        };
      }else if(MODIFYMODE == '2'){
        for(var i=0;i<this.tableData.MONTHWHLIST.length;i++){
          if(Number(this.tableData.MONTHWHLIST[i].MINHOURS) > Number(this.tableData.MONTHWHLIST[i].MAXHOURS)){
            this.$message({
              message: '每月最小时数不能大于每月最大时数',
              type: 'error'
            });
            this.loading = false;
            return;
          }
        }
        resBody.data.MONTHWHLIST = this.tableData.MONTHWHLIST;
      }else if(MODIFYMODE == '3'){
        if(data){
          data.forEach(item=>{
            item.ENDDATE = item.SRTDATE[1];
            item.SRTDATE = item.SRTDATE[0];
          })
        }else{
          this.tableData.WORKMODELIST.forEach(item=>{
            item.ENDDATE = item.SRTDATE[1];
            item.SRTDATE = item.SRTDATE[0];
          })
        }
        resBody.data.WORKMODELIST = data?data:this.tableData.WORKMODELIST;
      }else if(MODIFYMODE == '4'){
        if(data){
          data.forEach(item=>{
            item.ENDDATE = item.SRTDATE[1];
            item.SRTDATE = item.SRTDATE[0];
          })
        }else{
          this.tableData.ASSIGNRULELIST.forEach(item=>{
            item.ENDDATE = item.SRTDATE[1];
            item.SRTDATE = item.SRTDATE[0];
          })
        }
        resBody.data.ASSIGNRULELIST = data?data:this.tableData.ASSIGNRULELIST;
      } 
      request(resBody)
        .then(response => {
          if (response.SYS_HEAD.ReturnCode === "000000") {
            this.$message({
              message: '保存成功',
              type: 'success  '
            });
            if(this.auxBrnOptions.isShow){
              this.$refs.myChild2.queryClick();
            }else{
              this.queryModel();
            }
          } else {
            this.$message({
              message: "请求失败，错误码:" + response.SYS_HEAD.ReturnCode + "，错误信息：" + response.SYS_HEAD.ReturnMessage,
              type: 'error  '
            });
          }
        })
        .catch(error => {
          console.log("error", error);
        })
      this.loading = false;
    },
    // 查询坐席排班参数数据(参数只有auxBrn子组件中传入)
    queryModel(brno,op) {
      var data = [];
      this.loading = true;
      let resBody = new queryUserBaseData();
      resBody.data.BRANCHNO = brno&&op?brno:this.BRANCHNO;
      resBody.data.AGENTIDLISTSTR = brno=='first'?this.selRole:this.checkedCities.join(",");
      request(resBody)
        .then(response => {
          if (response.SYS_HEAD.ReturnCode === "000000") {
            data = response.BODY.AGENTINFO[0];
            this.ruleForm = data.BASERULE[0] || 
              {
                WEEKWORKMINHOURS: '',  //每周工作最小时数
                WEEKWORKMAXHOURS: '',  //每周工作最大时数
                MAXCONTINUEDAYS: '', //最多连续工作天数
                DAYOTMAXHOURS: '',  //每天加班最大时数
                WEEKOTMAXHOURS: '',  //每周加班最大时数
                MONTHOTMAXHOURS: '',  //每月加班最大时数
                YEARENABLEHOLIDAYDAYS: '',  //每年可休假期天数
                WEEKACCUHOLIDAY: '',  //每周累积休假天数
                MONTHACCUHOLIDAY: '',  //每月累积休假天数
                CLASSMINSPAN: '',  //相邻班次最短时间间隔
              };
            this.ruleFormBack = JSON.parse(JSON.stringify(this.ruleForm));
            // 完整月份列表
            var monthList = [];
            for(var i=0;i<12;i++){
              monthList.push({'MONTH':i+1+'','MINHOURS':'0','MAXHOURS':'0'});
            }
            data.MONTHWHLIST.forEach((item,idnex)=>{
              monthList.forEach((info,i)=>{
                if(item.MONTH == info.MONTH){
                  monthList[i] = item;
                }
              })
            });
            data.MONTHWHLIST = monthList;
            
            data.WORKMODELIST.forEach((item,idnex)=>{
              item.SRTDATE = [item.SRTDATE,item.ENDDATE]
            });
            data.ASSIGNRULELIST.forEach((item,idnex)=>{
              item.SRTDATE = [item.SRTDATE,item.ENDDATE]
            });
            if(op){
              // 将值传入子组件中
              if(op == '3'){
                this.$refs.myChild2.childAction(data.WORKMODELIST);
              }
              if(op == '4'){
                this.$refs.myChild2.childAction(data.ASSIGNRULELIST);
              }
            }else{
              this.tableData = JSON.parse(JSON.stringify(data));
            }
            
          } else {
            this.$message({
              message: "请求失败，错误码:" + response.SYS_HEAD.ReturnCode + "，错误信息：" + response.SYS_HEAD.ReturnMessage,
              type: 'error  '
            });
          }
        })
        .catch(error => {
          console.log("error", error);
        })
      this.loading = false;
    },
    // 查询机构
    // async queryBranch() {
    //   let resBody = new Query()
    //   resBody.data.BRANCHNO = '';
    //   let response = await request(resBody);
    //   if (response.SYS_HEAD.ReturnCode == "000000") {
    //     this.resData = response.BODY.BRANCHDATA;
    //     this.toJson();
    //   } else {
    //     this.$message({
    //       type: "error",
    //       message: "请求失败，错误码:" + response.SYS_HEAD.ReturnCode + "，错误信息：" + response.SYS_HEAD.ReturnMessage
    //     })
    //   }
    // },
    // toJson() {
    //   let _this = this;
    //   Array.prototype.ToTreeJson = function (pid) {
    //     var result = [],
    //       temp;
    //     for (var i in this) {
    //       if (this[i].FATHERBRANCHID == pid) {
    //         // console.log("this", this[i]);
    //         result.push(this[i]);
    //         temp = _this.circlefn(this, this[i].BRANCHID);
    //         if (temp.length > 0) {
    //           this[i].children = temp;
    //         }
    //       }
    //     }
    //     return result;
    //   }
    //   this.treedata = this.resData.ToTreeJson('0');
    // },
    // circlefn(data, pid) {
    //   var result = [],
    //     temp;
    //   for (var i in data) {
    //     if (data[i].FATHERBRANCHID == pid) {
    //       result.push(data[i]);
    //       temp = this.circlefn(data, data[i].BRANCHID);
    //       if (temp.length > 0) {
    //         data[i].children = temp;
    //       }
    //     }
    //   }
    //   return result;
    // },
    handleNodeClick(data) {
      // console.log(data);
    },
    resetForm(formName) {
      // 不是新增则把值恢复成原来的
      this.ruleForm = JSON.parse(JSON.stringify(this.ruleFormBack));
      if(formName){
        this.$refs[formName].resetFields();
      }else{
        this.queryModel();
      }
    },
    getBranch(data){
      // console.log(data)
      this.checkedCities = [];
      this.selRoleInfo = [];
      this.BRANCHNO = data.BRANCHNO;
      this.BRANCHNAME = data.BRANCHNAME;
      this.queryUser();
    },
  }
}
</script>
<style lang="scss" scoped>
.userBaseData{
  .userClass{
    height: 420px;
  }
  .block{
    margin-top:15px;
    height: 341px;
    overflow: auto;
  }
  .vacation{
    margin-top: 10px;
    .el-col{
      .el-form-item{
        width: 100%;
      }
    }
    .line{
      text-align: center;
    }
  }
  .el-checkbox-group {
    padding: 0 10px 10px;
  }

  .el-checkbox {
    display: inline-block;
    margin-bottom: 14px;
    // width: 135px;
    display: flex;
    height: auto;
    // padding: 6px 15px 6px 10px;
    white-space: inherit;
  }
}
</style>
<style lang="scss">
.branchStyle{
 .el-card__body{
   padding: 20px 8px;
 }
}
.userBaseData{
  
  .el-checkbox__inner{
    top: 2px;
  }
  .el-date-editor.el-input{
    width: 100%;
  }
  .el-input--prefix .el-input__inner{
    padding-left: 27px;
  }
  .el-date-editor{
    width: 100%;
  } 
}
</style>
